<template>
  <div class="admin-detail">
    <h2>详情id：{{ id }}</h2>
    <button @click="back">返回</button>

    <div class="content">
      <div class="cover">
        <img :src="album.cover" alt="">
      </div>
      <div class="name">
        唱片名称: {{ album.album }}
        <br/>
        歌手名称: {{ album.singer }}
      </div>
      <div class="info">{{ album.info }}</div>
    </div>
  </div>
</template>

<script>
import list from '../album-list.js';
export default {
  data() {
    return {
      id: '',
      list,

    }
  },
  computed: {
    // 如何从一个数组中查找满足某个的条件的某一项
    // this.list 找 id = this.id
    album() {
      // if (!this.id) return {};
      return this.list.find(i => i.id === this.id) || {};
    }

  },
  methods: {
    back() {
      // history.back();
      // history.go(-1);

      // $route  当前匹配/激活的路由对象
      this.$router.go(-1);
      // this.$router.back();
    }
  },
  created() {
    // let url = location.href;
    // const id = url.split('?id=')[1];
    // this.id = id;

    // $route 是当前页面的路由对象
    // 不要弄混了    $route  和  $router
    console.log(this.$route)
    console.log(this.$route.query.id)
    console.log(this.$router)
    this.id = this.$route.query.id;
  }
}
</script>
